﻿<div class="WAll PT">

	<div class="ContentBlockTitle">基础列表</div>
	<ul class="ListBlock ListBase">
		<li class="ListItem">Item 1</li>
		<li class="ListItem">Item 2</li>
		<li class="ListItem">Item 3</li>
	</ul>
	
	<div class="ContentBlockTitle">数据列表，带图标</div>
	<ul class="ListBlock">
		<li class="ListItem">
			<div class="ItemCon InkRipple">
				<div class="ItemMedia">
					<img class="Icon" src="images/svg/iconfont-user.svg" alt="用户" />
				</div>
				<div class="ItemInner">
					<div class="ItemTitle">
					Ivan Petrov
					</div>
					<div class="ItemAfter">
					CEO
					</div>
				</div>
			</div>
		</li>
		<li class="ListItem">
			<div class="ItemCon InkRipple">
				<div class="ItemMedia">
					<img class="Icon" src="images/svg/iconfont-user.svg" alt="用户" />
				</div>
				<div class="ItemInner">
					<div class="ItemTitle">
					John Doe
					</div>
					<div class="ItemAfter">
					<span class="Badge BadgePrimary">13</span>
					</div>
				</div>
			</div>
		</li>
		<li class="ListItem">
			<div class="ItemCon InkRipple">
				<div class="ItemMedia">
					<img class="Icon" src="images/svg/iconfont-user.svg" alt="用户" />
				</div>
				<div class="ItemInner">
					<div class="ItemTitle">
					Jenna Smith
					</div>
				</div>
			</div>
		</li>
	</ul>
	
	<div class="ContentBlockTitle">连接列表</div>
	<ul class="ListBlock">
		<li class="ListItem">
			<div class="ItemLink ItemCon InkRipple">
				<div class="ItemMedia">
					<img class="Icon" src="images/svg/iconfont-user.svg" alt="用户" />
				</div>
				<div class="ItemInner">
					<div class="ItemTitle">
					Ivan Petrov
					</div>
					<div class="ItemAfter">
					CEO
					</div>
				</div>
			</div>
		</li>
		<li class="ListItem">
			<div class="ItemLink ItemCon InkRipple">
				<div class="ItemMedia">
					<img class="Icon" src="images/svg/iconfont-user.svg" alt="用户" />
				</div>
				<div class="ItemInner">
					<div class="ItemTitle">
					John Doe
					</div>
					<div class="ItemAfter">
					<span class="Badge BadgeSuccess">13</span>
					</div>
				</div>
			</div>
		</li>
		<li class="ListItem">
			<div class="ItemLink ItemCon InkRipple">
				<div class="ItemMedia">
					<img class="Icon" src="images/svg/iconfont-user.svg" alt="用户" />
				</div>
				<div class="ItemInner">
					<div class="ItemTitle">
					Jenna Smith
					</div>
				</div>
			</div>
		</li>
	</ul>
	
	<div class="ContentBlockTitle">连接列表，没有图标</div>
	<ul class="ListBlock">
		<li class="ListItem">
			<div class="ItemLink ItemCon InkRipple">
				<div class="ItemInner">
					<div class="ItemTitle">
					Ivan Petrov
					</div>
					<div class="ItemAfter">
					CEO
					</div>
				</div>
			</div>
		</li>
		<li class="ListItem">
			<div class="ItemLink ItemCon InkRipple">
				<div class="ItemInner">
					<div class="ItemTitle">
					John Doe
					</div>
					<div class="ItemAfter">
					<span class="Badge BadgeSuccess">13</span>
					</div>
				</div>
			</div>
		</li>
		<li class="ListItem">
			<div class="ItemDivider">列表分割</div>
		</li>
		<li class="ListItem">
			<div class="ItemLink ItemCon InkRipple">
				<div class="ItemInner">
					<div class="ItemTitle">
					John Doe
					</div>
				</div>
			</div>
		</li>
	</ul>
	
	
	<div class="ContentBlockTitle">带有标题列表</div>
	<div class="ListBlock">
		<div class="ListGroup">
			<ul>
				<li class="ListItem GroupTitle">
					标题A
				</li>
				<li class="ListItem">
					<div class="ItemCon InkRipple">
						<div class="ItemInner">
							<div class="ItemTitle">
							Aaron 
							</div>
						</div>
					</div>
				</li>
				<li class="ListItem">
					<div class="ItemCon InkRipple">
						<div class="ItemInner">
							<div class="ItemTitle">
							Abbie
							</div>
						</div>
					</div>
				</li>
				<li class="ListItem">
					<div class="ItemCon InkRipple">
						<div class="ItemInner">
							<div class="ItemTitle">
							Adam
							</div>
						</div>
					</div>
				</li>
			</ul>
		</div>
		<div class="ListGroup">
			<ul>
				<li class="ListItem GroupTitle">
					标题B
				</li>
				<li class="ListItem">
					<div class="ItemCon InkRipple">
						<div class="ItemInner">
							<div class="ItemTitle">
							Bailey 
							</div>
						</div>
					</div>
				</li>
				<li class="ListItem">
					<div class="ItemCon InkRipple">
						<div class="ItemInner">
							<div class="ItemTitle">
							Barclay
							</div>
						</div>
					</div>
				</li>
			</ul>
		</div>
		<div class="ListGroup">
			<ul>
				<li class="ListItem GroupTitle">
					标题C
				</li>
				<li class="ListItem">
					<div class="ItemCon InkRipple">
						<div class="ItemInner">
							<div class="ItemTitle">
							Caiden 
							</div>
						</div>
					</div>
				</li>
				<li class="ListItem">
					<div class="ItemCon InkRipple">
						<div class="ItemInner">
							<div class="ItemTitle">
							Candy
							</div>
						</div>
					</div>
				</li>
			</ul>
		</div>
	</div>
	
	<div class="ContentBlockTitle">混合嵌套</div>
	
	<ul class="ListBlock">
		<li class="ListItem">
			<div class="ItemLink ItemCon InkRipple">
				<div class="ItemMedia">
					<img class="Icon" src="images/svg/iconfont-user.svg" alt="用户" />
				</div>
				<div class="ItemInner">
					<div class="ItemTitle">
					Ivan Petrov
					</div>
					<div class="ItemAfter">
					CEO
					</div>
				</div>
			</div>
		</li>
		<li class="ListItem">
			<div class="ItemCon InkRipple">
				<div class="ItemMedia">
					<img class="Icon" src="images/svg/iconfont-user.svg" alt="用户" />
					<img class="Icon" src="images/svg/iconfont-user.svg" alt="用户" />
				</div>
				<div class="ItemInner">
					<div class="ItemTitle">
					John Doe
					</div>
					<div class="ItemAfter">
					<span class="Badge BadgePrimary">13</span>
					</div>
				</div>
			</div>
		</li>
		<li class="ListItem">
			<div class="ItemCon">
				<div class="ItemInner">
					<div class="ItemTitle">
					带开关
					</div>
					<div class="ItemAfter">
						<label class="LabelSwitch">
							<input type="checkbox">
							<div class="checkbox"></div>
						</label>
					</div>
				</div>
			</div>
			<ul class="ListInline">
				<li class="ListItem">
					<div class="ItemCon InkRipple">
						<div class="ItemMedia">
							<img class="Icon" src="images/svg/iconfont-user.svg" alt="用户" />
						</div>
						<div class="ItemInner">
							<div class="ItemTitle">
							Ivan Petrov
							</div>
							<div class="ItemAfter">
							CEO
							</div>
						</div>
					</div>
				</li>
				<li class="ListItem">
					<div class="ItemLink ItemCon InkRipple">
						<div class="ItemMedia">
							<img class="Icon" src="images/svg/iconfont-user.svg" alt="用户" />
							<img class="Icon" src="images/svg/iconfont-user.svg" alt="用户" />
						</div>
						<div class="ItemInner">
							<div class="ItemTitle">
							John Doe
							</div>
							<div class="ItemAfter">
							<span class="Badge BadgePrimary">13</span>
							</div>
						</div>
					</div>
				</li>
				<li class="ListItem">
					<div class="ItemCon">
						<div class="ItemInner">
							<div class="ItemTitle">
							带开关
							</div>
							<div class="ItemAfter">
								<label class="LabelSwitch">
									<input type="checkbox">
									<div class="checkbox"></div>
								</label>
							</div>
						</div>
					</div>
				</li>
			</ul>
		</li>
		<li class="ListItem">
			<div class="ItemLink ItemCon InkRipple">
				<div class="ItemMedia">
					<img class="Icon" src="images/svg/iconfont-user.svg" alt="用户" />
				</div>
				<div class="ItemInner">
					<div class="ItemTitle">
					Ivan Petrov
					</div>
					<div class="ItemAfter">
					CEO
					</div>
				</div>
			</div>
		</li>

	</ul>

	
	<div class="ContentBlockTitle">混合插页,带圆角块级列表</div>	
	<ul class="ListBlock ListCard">
		<li class="ListItem">
			<div class="ItemLink ItemCon InkRipple">
				<div class="ItemMedia">
					<img class="Icon" src="images/svg/iconfont-user.svg" alt="用户" />
				</div>
				<div class="ItemInner">
					<div class="ItemTitle">
					Ivan Petrov
					</div>
					<div class="ItemAfter">
					CEO
					</div>
				</div>
			</div>
		</li>
		<li class="ListItem">
			<div class="ItemLink ItemCon InkRipple">
				<div class="ItemMedia">
					<img class="Icon" src="images/svg/iconfont-user.svg" alt="用户" />
				</div>
				<div class="ItemInner">
					<div class="ItemTitle">
					John Doe
					</div>
					<div class="ItemAfter">
					<span class="Badge BadgeSuccess">13</span>
					</div>
				</div>
			</div>
		</li>
		<li class="ListItem">
			<div class="ItemLink ItemCon InkRipple">
				<div class="ItemMedia">
					<img class="Icon" src="images/svg/iconfont-user.svg" alt="用户" />
				</div>
				<div class="ItemInner">
					<div class="ItemTitle">
					Jenna Smith
					</div>
				</div>
			</div>
		</li>
	</ul>
	<div class="BlockLabel">信息列表描述</div>

	<div class="ContentBlockTitle">自适应列表</div>	
	<ul class="ListBlock ListTabletInset">
		<li class="ListItem">
			<div class="ItemLink ItemCon InkRipple">
				<div class="ItemMedia">
					<img class="Icon" src="images/svg/iconfont-user.svg" alt="用户" />
				</div>
				<div class="ItemInner">
					<div class="ItemTitle">
					Ivan Petrov
					</div>
					<div class="ItemAfter">
					CEO
					</div>
				</div>
			</div>
		</li>
		<li class="ListItem">
			<div class="ItemLink ItemCon InkRipple">
				<div class="ItemMedia">
					<img class="Icon" src="images/svg/iconfont-user.svg" alt="用户" />
				</div>
				<div class="ItemInner">
					<div class="ItemTitle">
					John Doe
					</div>
					<div class="ItemAfter">
					<span class="Badge BadgeSuccess">13</span>
					</div>
				</div>
			</div>
		</li>
		<li class="ListItem">
			<div class="ItemLink ItemCon InkRipple">
				<div class="ItemMedia">
					<img class="Icon" src="images/svg/iconfont-user.svg" alt="用户" />
				</div>
				<div class="ItemInner">
					<div class="ItemTitle">
					Jenna Smith
					</div>
				</div>
			</div>
		</li>
	</ul>
	<div class="BlockLabel">平板电脑适用</div>

</div>




















